<template>
  <div class="search">
    <!-- 面包屑导航 -->
    <div class="bread">
      <div @click="setSearcherCategory">
        <span class="category"><a :data-id="0">全部商品</a></span> &gt;
        <span class="category" v-if="category.categoryId"
          ><a :data-id="category.categoryId">{{ category.categoryName }}</a
          >&nbsp;&gt;&nbsp;</span
        >
        <span v-if="subCategory.subCategoryId"
          ><a :data-id="subCategory.subCategoryId">{{
            subCategory.subCategoryName
          }}</a
          >&nbsp;&gt;&nbsp;</span
        >
        <span>{{ route.query.keyword }}</span>
      </div>
    </div>
    <!-- 分类 -->
    <div class="f">
      <div class="sort">
        <span class="sort-1" @click="setSearcherCategory"
          >分类:
          <a
            v-for="category in searcherCategoryHitCountList"
            :data-id="category.categoryVO.id"
            >{{ category.categoryVO.name }}</a
          >
        </span>
      </div>
      <!-- 排序 -->
      <div class="sort-b">
        <div class="sort-2">
          排序:
          <span
            class="sort-2-1"
            @click="setSort(0)"
            :class="{sortActive:route.query.sortType as any == 0}"
            >默认</span
          >
          <span
            class="sort-2-2"
            @click="setSort(1)"
            :class="{sortActive:route.query.sortType as any == 1}"
          >
            <span>价格</span>
            <i class="iconfont icon-shangxiajiantou"></i>
          </span>
          <b class="price-range">
            <input type="text" class="ipt" v-model="floorPrice" />
            <i>- </i>
            <input type="text" class="ipt" v-model="upperPrice" />
            <i class="icon-mf">￥</i>
            <i class="icon-mu">￥</i>
          </b>

          <button class="confirm-btn" @click="setPriceRange">确定</button>
          <button class="reset-btn" @click="resetPriceRange">清空</button>
        </div>
      </div>
      <!-- loading -->
      <WLoading v-show="isLoading" />
      <!-- 商品列表 -->
      <div class="good-list-wrap" v-show="!isLoading" v-to-detail="router">
        <div class="goods" v-for="good in goodList">
          <div class="img">
            <img :src="good.listPicUrl" :alt="good.name" class="img1" />
            <img
              :src="good.scenePicUrl"
              :alt="good.name"
              class="img2"
              style="display: none"
              :data-id="good.id"
            />
          </div>
          <div class="shop">
            <p class="p1" ><a :data-id="good.id">{{ good.name }}</a></p>
            <span class="goods-price">￥{{ good.retailPrice }}</span>
            <span class="goods-delprice">￥{{ good.counterPrice }}</span>
            <br />
            <button class="btn-join">加入购物车</button>
          </div>
        </div>
      </div>
      <div style="padding-bottom:40px;color:#999" v-if="!goodList">
        暂时无商品信息,请重新搜索！
      </div>
      <!-- 分页器 -->
      <Pagination
        :page="pagination.page"
        :size="pagination.size"
        :total="pagination.total"
        :continuous="5"
        @changePage="changePage"
        v-if="goodList?.length"
      />
    </div>
  </div>
</template>
<script lang="ts">
  export default {
    name: "WSearch",
  };
</script>
<script lang="ts" setup>
  import { useSearchStore } from "@/stores/modules/search";
  import { storeToRefs } from "pinia";
  import { useRoute } from "vue-router";
  import { ref, watch } from "vue";
  import Pagination from "../../components/Pagination/index.vue";
  import WLoading from "../../components/WLoading/index.vue";
  import router from "@/router";
  const route = useRoute();
  const searchStore = useSearchStore();
  const {
    goodList,
    pagination,
    isLoading,
    searcherCategoryHitCountList,
    category,
    subCategory,
  } = storeToRefs(searchStore);
  const { search } = searchStore;
  const upperPrice = ref("");
  const floorPrice = ref("");
  // 修改页数
  const changePage = (page: number) => {
    searchStore.searchParams.page = +page;
    search();
  };
  // 设置分类查询参数
  const setSearcherCategory = (e) => {
    if (e.target.nodeName !== "A") return;
    router.push({
      name: "WSearch",
      query: { ...route.query, categoryId: e.target.dataset.id },
    });
  };
  // 设置排序类型参数
  const setSort = (sortType: number) => {
    if (sortType) {
      return router.push({
        name: "WSearch",
        query: {
          ...route.query,
          sortType: 1,
          descSorted: route.query.descSorted === "true" ? "false" : "true",
        },
      });
    }
    router.push({
      name: "WSearch",
      query: { ...route.query, sortType: 0, descSorted: "true" },
    });
  };
  // 设置价格区间参数
  const setPriceRange = () => {
    if (!floorPrice.value.trim() || !upperPrice.value.trim()) return;
    router.push({
      name: "WSearch",
      query: {
        ...route.query,
        floorPrice: floorPrice.value,
        upperPrice: upperPrice.value,
      },
    });
  };
  // 重置价格区间参数
  const resetPriceRange = () => {
    floorPrice.value = "";
    upperPrice.value = "";
    router.push({
      name: "WSearch",
      query: {
        ...route.query,
        floorPrice: -1,
        upperPrice: -1,
      },
    });
  };
  // 监听查询参数变化发送请求
  watch(
    () => route.query,
    (query: any) => {
      searchStore.$reset();
      searchStore.searchParams.keyword = query.keyword as unknown as string;
      searchStore.searchParams.page = 1;
      searchStore.searchParams.size = 12;
      searchStore.searchParams.searchWordSource = 1;
      searchStore.searchParams.categoryId = query.categoryId || 0;
      searchStore.searchParams.sortType = query.sortType || 0;
      searchStore.searchParams.descSorted = query.descSorted || true;
      searchStore.searchParams.floorPrice = query.floorPrice;
      searchStore.searchParams.upperPrice = query.upperPrice;
      search();
    },
    {
      immediate: true,
    }
  );
</script>
<style scoped lang="less">
  .search {
    height: 100%;
    text-align: center;
    background-color: #f5f5f5;
    padding-top: 10px;
    padding-bottom: 50px;
  }
  .f {
    width: 1090px;
    margin: 0 auto;
    background-color: #ffffff;
  }
  .bread {
    height: 30px;
    overflow: hidden;
    font-size: 12px;
    div {
      width: 1090px;
      margin: 0 auto;
      text-align: left;
    }
    span {
      color: #999;
    }
  }
  .sort {
    width: 1010px;
    border-bottom: 1px dashed #e7e7e7;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
    font-size: 14px;
  }
  .sort-1 {
    color: #999;
    a {
      cursor: pointer;
    }
  }
  .sort-1 a {
    padding: 0 10px;
    color: #333;
    &:hover {
      color: #b4a078;
    }
  }
  .sort-b {
    width: 1010px;
    border-bottom: 1px solid #e7e7e7;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
    font-size: 14px;
  }
  .sort-2 {
    color: #999;
  }
  .sort-2 span {
    padding: 0 16px;
  }
  .sort-2-1 {
    cursor: pointer;
  }
  .sort-2-2 {
    color: #333;
    cursor: pointer;
    i {
      font-size: 13px;
    }
    span {
      padding-right: 0;
      vertical-align: text;
    }
    &:hover {
      color: #b4a078;
    }
  }
  .price-range {
    position: relative;
    i {
      font-style: normal;
    }
    .icon-mf {
      position: absolute;
      left: 7px;
      top: 3px;
    }
    .icon-mu {
      position: absolute;
      right: 52px;
      top: 3px;
    }
  }
  .ipt {
    margin-left: 5px;
    margin-right: 5px;
    width: 45px;
    height: 24px;
    border: 1px solid #999;
    color: #999;
    outline: none;
    padding-left: 15px;
  }
  .goods {
    width: 245px;
    height: 401px;
    float: left;
    margin: 10px 6.25px;
    img {
      cursor: pointer;
    }
    &:hover {
      background-color: #f4f0ea;

      box-shadow: #999 0 0 10px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  }
  .search::after {
    content: "";
    display: block;
    clear: both;
  }
  .img {
    position: relative;
    width: 245px;
    height: 245px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .img2 {
    position: relative;
    top: -247px;
    left: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .goods:hover .img2 {
    display: block !important;
  }
  .p1 {
    font-size: 13px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 17px;
    padding-left: 28px;
    padding-right: 28px;
    height: 20px;
    cursor: pointer;
    line-height: 17px;
    a:hover {
      color: #c0ae8a;
    }
  }
  .goods-price {
    color: #d4282d;
    font-size: 13px;
    margin-right: 5px;
  }
  .goods-delprice {
    text-decoration: line-through;
    color: #999;
    font-size: 12px;
  }
  .btn-join {
    margin-top: 10px;
    background-color: #b4a078;
    border: 1px solid #ffffff;
    width: 110px;
    height: 30px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    &:hover {
      background-color: #c0ae8a;
    }
  }
  .good-list-wrap {
    width: 1030px;
    margin: 0 auto;
    padding: 30px;
    padding-bottom: 0;
    margin: 0;
  }
  .good-list-wrap::after {
    display: block;
    content: "";
    clear: both;
  }
  .category {
    a {
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .sortActive {
    color: #c0ae8a;
  }
  .confirm-btn,
  .reset-btn {
    margin: 0 5px;
    outline: none;
    background-color: #f5f5f5;
    border: 1px solid rgba(102, 102, 102, 0.259);
    padding: 3px 10px;
    cursor: pointer;
    &:hover {
      background-color: #f5f5f54e;
    }
  }
</style>
